/*
 * @Author: luoqi
 * @Date: 2022-03-30 13:51:15
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-11 15:27:44
 * @Description: 
 */
import React, { useState,useForm, useRef } from 'react';
import { Form, Input, InputNumber, Modal, Select, Statistic, Row, Col, ConfigProvider,Button } from 'antd';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
import zhCN from "antd/es/locale/zh_CN";

import CommonButton from '../../components/HOC/HocButton/CommonButton';

const { Option } = Select;
//新增代付订单
const Addagency = (props) => {
  console.log(props);
  //表单
  const [form] = Form.useForm();
  //模态框
  const [isModalVisible, setIsModalVisible] = useState(false);
  //金额
  const [number, setNumber] = useState({ value: 11, });



  //模态框
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    //点击确定后提交表单
    form.submit()
  };

  const handleCancel = () => {
    form.resetFields()
    setIsModalVisible(false);
    
    
  };
  //更换卡商
  function handleChange(value) {
    console.log(`selected ${value}`);
  }

  //更改金额
  const onNumberChange = (value) => {
    setNumber({ ...number, value });
  };
  //确认提交
  function onFinish(value){
    if(props.type=='add'){
      let {id}=props.data
      value.id=id
      //增加代付
      props.addAgency(value)
      
    }else{
      let {id,key}=props.data
      value.id=id
      //用户没有修改就将原始数据进行传递
      value.key=value.key||key;
      //修改代付
      props.modifyAgency(value)
    }
    form.resetFields();
    setIsModalVisible(false);
  }
  return (
    <div>
      {props.type==='add'? <Button type="primary" onClick={showModal} icon={<PlusOutlined />}>新增</Button>:<Button host="true" size="small" onClick={showModal}>修改</Button>}
     
      <ConfigProvider locale={zhCN}>
        <Modal title={props.type==='add'?"新增代付":"修改代付"} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} mask={false} width={500} >

          <Form
            form={form}
            name="basic"
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 16 }}
            onFinish={onFinish}
            initialValues={{chiKaName:props.data&&props.data.chiKaName,yinHangName:props.data&&props.data.yinHangName,yinHangKaHao:props.data&&props.data.yinHangKaHao,yuE:props.data&&props.data.yuE}}
          >
            <Form.Item
              label="持卡人姓名"
              name="chiKaName"
              rules={[{ required: true, message: '请输入持卡人姓名!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="银行名称"
              name="yinHangName"
              rules={[{ required: true, message: '请输入银行名称!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="银行卡号"
              name="yinHangKaHao"
              rules={[{ required: true, message: '请输入有效的银行卡号!',  pattern: /^([1-9]{1})(\d{15}|\d{18})$/, }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="代付金额（元）"
              name="yuE"
              rules={[{ required: true, message: '请输入代付金额!' }]}
            >
              {/* <Input/> */}
              <InputNumber  style={{ width: '200px' }} />
            </Form.Item>
          </Form>
        </Modal>
      </ConfigProvider>

    </div>
  );
}




export default Addagency;
